<template>
 <div style="width: 100vw;height: 100vh;">
   <div style="display: inline-block;float: left;height: 100%">
     <div style="width: 240px;font-size: 16px;color: var(--color-neutral-10);line-height: 70px;text-align: center">
       志愿助手数据库管理系统
     </div>
     <div style="width: 240px;height: 100%;position: relative;display: inline-block;float: left;">
       <div style="width: 100%;height: calc(100% - 55px);overflow-y: auto;padding: 0px 5px">
         <div v-if="data.islogined==false">
           <div class="nav-button-selected">
             登录
           </div>
         </div>
         <div v-if="data.islogined">
           <div v-for="item in data.navButtons" :class="data.currentPage==item.index?['nav-button-selected']:['nav-button']" @click="changePage(item.index)">
             {{ item.title }}
           </div>
         </div>
       </div>
     </div>
   </div>
    <div style="width: calc(100% - 240px);height: 100%;position: relative;display: inline-block;float: right;background-color: var(--color-neutral-1);">
        <div v-if="data.islogined==false" style="width: 100%;height: 100%;position: relative;padding-left: 50%;padding-top: 50vh;">
            <div style="transform: translate(-50%,-50%);display: inline-block;color: var(--color-neutral-10);">
                <p style="margin-bottom: 10px;">请输入管理员登录密码</p>
                <v-text-field :disabled="data.loginForm.isLogining" v-model="data.loginForm.password" type="password" style="width: 320px;" label="密码" variant="outlined"></v-text-field>
                <p v-if="data.loginForm.warningText!=''" style="color: red;margin-top: -10px;">{{ data.loginForm.warningText }}</p>
                <v-btn :loading="data.loginForm.isLogining" style="float: right;" variant="text" @click="loginAdmin">登录</v-btn>
            </div>
        </div>
        <div v-if="data.islogined" style="width: 100%;height: calc(100%);position: relative;">
            <RouterView :change-page-nav-button="changePageButton" :app-data="appData" :bg-data="data"></RouterView>
        </div>
    </div>
 </div>
</template>

<script>
import tool from '@/utlis/tool';
import axios from 'axios';
import sha256 from 'js-sha256';
import router from '@/router'

export default{
  data(){
    return{
      data:{
        islogined:false,
        currentPage:-1,
        loginForm:{
            password:'',
            warningText:'',
            isLogining:false,
        },
        navButtons:[
            {
                title:'首页',
                index:0,
                path:'/home'
            },
            {
                title:'账号管理',
                index:1,
                path:'/account'
            },
            {
              title:'轮播图管理',
              index:2,
              path:'/banner'
            },
          {
            title:'一分一段表管理',
            index:3,
            path:'/scoreRanks'
          },
          {
            title:'志愿表管理',
            index:4,
            path:'/volunteer'
          },
          {
            title:'学校信息管理',
            index:5,
            path:'/school'
          },
          {
            title:'专业信息管理',
            index:6,
            path:'/special'
          },
          {
            title:'学校开设专业介绍信息管理',
            index:7,
            path:'/schoolSpecial'
          },
          {
            title:'收费管理',
            index:8,
            path:'/card'
          },
          {
            title:'操作数据库',
            index:9,
            path:'/dboperator'
          },
          {
            title:'系统设置',
            index:10,
            path:'/setting'
          },
          {
            title:'获取数据',
            index:11,
            path:'/crawler'
          },
        ],
        loginedAdminInfo:undefined,
        canUpdateStatus:true,
      }
    }
  },
  mounted(){
    router.push('/bg')
    setInterval(() => {
      let cn = '/' + router.currentRoute._value.path.split('/')[2]
      for(let i=0;i<this.data.navButtons.length;i++){
        if(this.data.navButtons[i].path==cn){
          this.data.currentPage = this.data.navButtons[i].index
          break
        }
      }
    }, 1);
  },
  methods:{
    changePageButton(){
      
    },
    async updateLoginStatus(){
        if(this.data.canUpdateStatus==false){
            return
        }
        let re = await this.axiosPost('/user/updateStatus',{
            token:this.data.loginedAdminInfo.token
        })
        if(re.status==-2){
            this.data.canUpdateStatus=false
            alert('服务器已重启或此账号已在其他设备上登录，即将退出登录')
            location.reload()
        }
    },
    async loginAdmin(){
        this.data.loginForm.isLogining = true
        let re = await this.axiosPost('/bg/admin/login',{
            password:sha256(this.data.loginForm.password)
        })
        this.data.loginedAdminInfo = re.results
        this.data.loginForm.isLogining = false
        this.data.loginForm.password = ''
        if(re.status==1){
            this.data.islogined = true
            this.data.currentPage = 0
            router.push('/bg/home')
            setInterval(() => {
                this.updateLoginStatus()
            }, 100000);
        }else{
            this.data.loginForm.warningText = '密码错误'
        }
    },
    changePage(index){
        this.data.currentPage = index
        router.push('/bg' + this.data.navButtons[index].path)
    },
    axiosGet(url,data){
      return new Promise((resolve, reject) => {
        data = tool.encodeString(JSON.stringify(data));
        var config = {
           method: 'get',
           url: this.appData.serverURL + url,
           data : data
        };
        axios(config)
        .then((res) => {
          return resolve(JSON.parse(tool.decodeString(res.data)))
        })
    })
    },
    axiosPost(url,data){
      return new Promise((resolve, reject) => {
        data = tool.encodeString(JSON.stringify(data));
        var config = {
           method: 'post',
           url: this.appData.serverURL + url,
           data : data
        };
        axios(config)
        .then((res) => {
          return resolve(JSON.parse(tool.decodeString(res.data)))
        })
    })
    },
  },
  props:{
    appData:undefined
  },
}
</script>

<style scoped>

.nav-button-selected{
    background-color: var(--color-neutral-1);
    color: var(--color-neutral-10);
    font-size: 14px;
    padding: 12px 17px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.nav-button-selected:hover{
    background-color: var(--color-neutral-2);
}

.nav-button-selected:active{
    background-color: var(--color-neutral-1);
}

.nav-button{
    font-size: 14px;
    padding: 12px 17px;
    color: var(--color-neutral-10);
    margin-bottom: 5px;
    border-radius: 5px;
}
.nav-button:hover{
  background-color: var(--color-neutral-2);
}

.nav-button:active{
  background-color: var(--color-neutral-1);
}

</style>